<template>
  <div class="query">
    <el-form v-show="showMore" :model="ruleForm"
             ref="ruleForm"
             label-width="120px"
             class="yuyi-ruleForm"
             :style="{'height': transitionHeight}">
      <div ref="transitionBox">

        <el-form-item v-for="(item, index) in data"
                      :key="index"
                      v-show="item"
                      :label="chineseName(item ? item.name : '')">
          <folding-panel :transitionIsOpen="transitionIsOpen"
                         @handleBtnMore="handleBtnMore">
            <checkbox-item v-if="item"
                           :list="item.fileds"
                           :type="item.name"
                           :secretData="secretData"
                           :safekeepingData="safekeepingData"
                           @change="handleChecked($event, item.name)">
            </checkbox-item>
          </folding-panel>

        </el-form-item>
      </div>
    </el-form>
    <div class="text-center" v-show="showMore">
      <el-button class="more-btn"
                 :class="{'shouqi': transitionHeight !== '46px'}"
                 type="text"
                 @click="handleToggle">
        {{transitionHeight === '46px' ? '展开更多筛选' : '收起'}}
        <i :class="transitionHeight === '46px' ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import { getArchivesDicId } from '../../../../api/dictionary/dictionary'
import FoldingPanel from '../../../../components/foldingPanel/foldingPanel'
import CheckboxItem from '../../../../components/checkboxItem/checkboxItem'

export default {
  name: 'searchCondition',
  components: {
    CheckboxItem,
    FoldingPanel
  },
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      transitionHeight: '46px',
      transitionIsOpen: false,
      screenListHeight: '46px',
      yearList: [2021, 2020, 2019, 2018, 2017],
      termList: ['永久', '30年', '10年', '长期', '短期'],
      levelList: ['绝密', '机密', '秘密'],
      checkboxList: {
        // 选中项目
      },
      ruleForm: {},
      dicData: [], // 利用显示分组
      secretData: [], // 密级
      safekeepingData: [] // 保管期限
    }
  },
  mounted () {
    this.getArchivesDic()
  },
  computed: {
    showMore () {
      let showMore = false
      this.data.map(item => {
        if (item) {
          showMore = true
        }
      })
      return showMore
    }
  },
  methods: {
    getArchivesDic () {
      // 利用显示分组
      getArchivesDicId('utilize_grouping').then(res => {
        this.dicData = res.data.data
      })
      // 密级
      getArchivesDicId('sec_period_type').then(res => {
        this.secretData = res.data.data
      })
      // 保管期限
      getArchivesDicId('retention_type_jsda').then(res => {
        this.safekeepingData = res.data.data
      })
    },
    chineseName (val) {
      let name = ''
      this.dicData.map(item => {
        if (item.dictValue === val) {
          name = item.dictLabel + '：'
        }
      })
      return name
    },
    handleToggle () {
      // 展开更多筛选
      this.transitionIsOpen = !this.transitionIsOpen
      if (this.transitionIsOpen) {
        this.transitionHeight = this.$refs.transitionBox.clientHeight + 'px'
      } else {
        this.transitionHeight = '46px'
      }
    },
    handleBtnMore () {
      this.transitionHeight = 'auto'
      this.$nextTick(() => {
        setTimeout(() => {
          this.transitionHeight = this.$refs.transitionBox.clientHeight + 'px'
        }, 399)
      })
    },
    handleChecked (val, type) {
      // 选中项
      this.checkboxList[type] = val
      this.$emit('change', this.checkboxList)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .query {
    background: #fff;

    .yuyi-ruleForm {
      padding-top: 5px;
      overflow: hidden;
      transition: 0.4s linear;

      ::v-deep .el-form-item {
        margin-bottom: 0px;

        .el-checkbox {
          margin-right: 10px;

          .el-checkbox__label {
            padding: 5px 10px;
            border-radius: 3px;
          }

          &.is-checked {
            .el-checkbox__label {
              color: #fff;
              background: #409EFF;
            }
          }

          .el-checkbox__input {
            display: none;
          }
        }
      }

    }

    .shouqi {
      color: #999
    }
  }
</style>
